import { useEffect, useState } from 'react'
import { NavBar, Icon, List, Toast } from 'antd-mobile'
import { reqGetCountryData } from '../../api/common'

import './index.less'

const Item = List.Item

export default function CountryPicker(props) {
  const { history,location } = props
  // 定义状态 countryData=》值是一个对象里面有好多数组
  const [countryData, setCountryData] = useState({})

  // 生命周期函数 componentDidMount
  useEffect(async () => {
    try {
      // 放置可能出错的代码
      // 如果没有出错，就只会执行try里面的代码，
      // 一旦出错，就不会执行try的代码啦，回来到catch
      // 请求成功
      const res = await reqGetCountryData()
      console.log(res.data.data)
      setCountryData(res.data.data)
    } catch (error) {
      // 请求失败
      // error就是失败的原因
      console.log(error)
      // 错误提示
      Toast.fail('请求失败了，请刷新试试～', 2)
    }
  }, [])

  const goCountry = (key) => {
    return () => {
      // key点击的是哪个元素
      // 求元素距离顶部的距离 document.getElementById(key).offsetTop
      window.scrollTo(0, document.getElementById(key).offsetTop - 45)
    }
  }
  // const goBack = (value) => {
  //   return () => {
  //     // push方法的第二个参数，就是路由传参：state参数
  //     history.push('/register/phone', value)
  //   }
  // }
  const goBack = (value) => {
    return () => {
      // push方法的第二个参数，就是路由穿参：state参数
      history.push(location.state, value);
    };
  };

  // countryData是所有数据
  // 提取对象上所有属性名成为数组并返回
  // 对象的key对应的是键
  const countryDataKeys = Object.keys(countryData)
  // console.log(countryDataKeys)//*,A,B,...

  return (
    <div>
      <NavBar
        className="country-picker-navbar"
        mode="light"
        icon={<Icon type="left" className="icon-left" />}
        onLeftClick={() => history.goBack()}
      >
        选择国家或者地区
      </NavBar>
      <div className="country-picker-wrapper">
        {/* 遍历对象里面的数组，对数组进行遍历  countryKey=》数组里面对象的键值=》0，1，2。。。*/}
        {countryDataKeys.map((countryKey) => {
          const countryValue = countryData[countryKey]
          //console.log(countryValue) //是对象下的数组

          return (
            <List
              id={countryKey}
              renderHeader={() => countryKey}
              key={countryKey}
            >
              {countryValue.map((country) => {
                // country是一个对象 { "中国": "86" }
                // key --> 中国
                const key = Object.keys(country)[0]
                // value --> 86
                const value = country[key]

                return (
                  // extra={value}=》右边的值， {key}写在Item里面表示左边的值
                  <Item
                    onClick={goBack(value)}
                    extra={'+' + value}
                    key={key}
                    className="country-picker-item"
                  >
                    {key}
                  </Item>
                )
              })}
            </List>
          )
        })}
      </div>
      <ul className="country-picker-sidebar">
        {countryDataKeys.map((key) => {
          return (
            <li key={key} onClick={goCountry(key)}>
              {key}
            </li>
          )
        })}
      </ul>
    </div>
  )
}
